<template>
  <BaseCard title="线索城市分布Top20">
    <template v-if="dataSource.length">
      <div class="bar-wrap">
        <div class="bar">
          <div class="bar-item" :key="index" v-for="(item, index) in dataSource">
            <span class="city">{{ item.city }}:</span>
            <a-progress :percent="item.percent" strokeColor="#1890ff" status="active" :show-info="false" />
          </div>
        </div>
        <div class="num-wrap">
          <div class="num" :key="index" v-for="(item, index) in dataSource">{{ item.formNum }}</div>
        </div>
      </div>
    </template>
    <a-empty v-else />
  </BaseCard>
</template>

<script>
import * as Ajax from '@/api/dashboard';
export default {
  data() {
    return {
      loading: true,
      dataSource: [],
      total: 0,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData(time) {
      this.loading = true;
      Ajax.getPageInfo8(time).then(({ success, data }) => {
        if (success) {
          this.total = data.reduce((sum, obj) => sum + obj.formNum, 0);
          this.dataSource = Array.isArray(data) ? data.map((it) => ({
            ...it,
            percent: it.formNum / this.total * 100,
          })) : [];
        }
      }).finally(() => {
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bar-wrap {
  display: flex;
}

.bar {
  flex: 1;

  .bar-item {
    display: flex;
    align-items: center;

    &:not(:last-child) {
      margin-bottom: 8px;
    }
  }
}

.city {
  word-break: keep-all;
  margin-right: 6px;
}

.num-wrap {
  margin-left: 6px;

  .num {
    font-display: flex;
    align-items: center;

    &:not(:last-child) {
      margin-bottom: 8px;
    }
  }
}

:deep(.ant-progress) {
  flex: 1;
}

:deep(.ant-progress-bg) {
  height: 12px !important;
}

:deep(.ant-progress-text) {
  font-size: 12px;
}
</style>
